<template>
    <div>
        <section>
            <van-nav-bar title="登录" fixed placeholder safe-area-inset-top />
        </section>

        <van-form>
            <van-field v-model="username" name="用户名" label="用户名" placeholder="请输入用户名"
                :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" @click="onSubmit">登录</van-button>
            </div>
            <van-button class="goToRegisterClass" @click="goToRegister">没有账号？立即注册</van-button>
        </van-form>
    </div>
</template>

<script setup>
import { ref } from "vue";
import useUserStore from '@/store/user';
import { showConfirmDialog } from "vant";
import router from "@/router";

let username = ref('')
let password = ref('')

const userStore = useUserStore()

const onSubmit = () => {
    if (username.value === '' || password.value === '') return
    userStore.userLogin(username.value, password.value)
}

const goToRegister = () => {
    showConfirmDialog({
        title: '请选择您的身份',
        message:
            '为了更好地为您提供服务，请选择您的身份',
        confirmButtonText: '志愿者',
        cancelButtonText: '盲人',
        confirmButtonColor: '#323233',
    }).then(() => {
        // on confirm
        router.push({ name: 'UserRegister', params: { types: '1' } })
    }).catch(() => {
        // on cancel
        router.push({ name: 'UserRegister', params: { types: '0' } })
    });
}



</script>

<style scoped>
.goToRegisterClass {
    z-index: 100;
    margin-top: -10px;
    opacity: .7;
    position: absolute;
    right: 1vw;
    color: #1989fa;
    border: none;
    background-color: transparent;
}
</style>
